<template>
  <el-container v-loading="loadingData" element-loading-text="拼命加载中">
    <el-main>
      <h1 v-if="books.length===0">当前系统未上传文献，请先上传文献</h1>
      <el-row>
        <el-col :span="4" v-for="(item, index) in books" :key="item.id">
          <el-card @click.native="goToForum(index)" :body-style="{ padding: '0px' }"
                   style="margin-right: 20px; margin-bottom: 20px; cursor:pointer;">
            <img :src="item.coverUrl" class="image">
            <div style="padding: 14px;">
              <div class="bottom clearfix">
                <el-row :gutter="20">
                  <el-col :span="24"><span style="font-size: 12px;">{{ item.name }}</span></el-col>
                  <!--                      <el-col :span="6">-->
                  <!--                        <el-button type="primary" icon="el-icon-setting" class="button"></el-button>-->
                  <!--                      </el-col>-->
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {postRequest} from '../../tools/api'
import Epub from 'epubjs'

export default {
  name: 'Forum',
  data () {
    return {
      pageDto: {
        page: 1,
        pageSize: 10
      },
      loadingData: true,
      books: []
    }
  },
  created () {
    this.initBooks()
  },
  methods: {
    goToForum (index) {
      if (this.$route.fullPath === '/Learned') {
        this.$router.push({
          path: '/LearnedForum',
          query: {id: this.books[index].id}
        })
      } else {
        this.$router.push({
          path: '/ThemeForum',
          query: {id: this.books[index].id}
        })
      }
    },
    initBooks () {
      postRequest('/literaturedetail/queryList', this.pageDto).then(res => {
        this.books = res.data
        // 请求文献封面
        for (let i = 0; i < this.books.length; i++) {
          const book = new Epub(this.books[i].url) // 生成Book对象
          book.loaded.cover.then(cover => {
            book.archive.createUrl(cover).then(url => {
              this.books[i].coverUrl = url
              this.$forceUpdate()
            })
          })
          if (this.books[i].name.length > 12) {
            this.books[i].name = this.books[i].name.slice(0, 12) + '...'
          }
        }
        // console.log('books', this.books)

        this.loadingData = false
      })
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
